<template>
    <div>
        <a-layout>
            <a-layout-header class="header" style="background: #E32319">
                <div class="logo"/>
                <!--顶部导航-->
                <a-menu
                        style="background: #E32319"
                        mode="horizontal"
                        :style="{ lineHeight: '63px' }"
                >
                    <a-menu-item key="key_home">
                        <a style="color:whitesmoke;margin-right: 30px" href="/user-center"> 麦猫用户中心</a>
                    </a-menu-item>

                    <a-menu-item class="center-menu-item" @click="toInfoCenter" @mouseover="openAccountMenu(true)">
                        账户设置
                    </a-menu-item>


                </a-menu>
            </a-layout-header>
            <div
                    @mouseleave="onClose()"
                    v-show="accountDrawer"
                    class="drawerContainer"
            >
                <a-card v-if="accountDrawer" :bordered="false">
                    <a class="menu-a">
                        <a-card-grid :bordered="false" class="menu-grid"
                                     @click="topMenuClick('/user-center/base_info?item=base')"
                        >个人信息
                        </a-card-grid>
                    </a>
                    <a class="menu-a">
                        <a-card-grid :bordered="false" class="menu-grid"
                                     @click="topMenuClick('/user-center/verify')">
                            修改登录密码
                        </a-card-grid>
                    </a>
                    <a class="menu-a">
                        <a-card-grid :bordered="false" class="menu-grid"
                                     @click="topMenuClick('/user-center/bindEmail')">

                            邮箱绑定
                        </a-card-grid>
                    </a>

                 <!--   <a class="menu-a">
                        <a-card-grid :bordered="false" class="menu-grid">修改头像、昵称
                        </a-card-grid>
                    </a>-->
                    <a class="menu-a">
                        <a-card-grid :bordered="false" class="menu-grid"
                                     @click="topMenuClick('/user-center/address_ms?item=address')">
                            收货地址
                        </a-card-grid>
                    </a>


                </a-card>


            </div>
            <a-layout-content style="padding:30px 80px;background: white">
                <!--顶部导航抽屉-->
                <router-view/>
            </a-layout-content>
        </a-layout>


    </div>
</template>

<script>

    export default {
        name: "cellCenter",
        data() {
            return {
                accountDrawer: false,
            }
        },
        watch: {
            openKeys(val) {
                console.log('openKeys', val);
            },
        },
        methods: {
            /**
             * 到个人中心去
             */
            toInfoCenter() {
                // this.$router.push("/user-center/base_info")
            },
            topMenuClick(path) {
                this.$router.push(path)
            },
            titleClick(e) {
                console.log('titleClick', e);
            },
            openAccountMenu(open) {
                this.accountDrawer = open;
            },
            onClose() {
                this.accountDrawer = false;
            },
        }
    }
</script>

<style scoped>

    .center-menu-item {
        margin-left: 100px;
        color: #F9FBFE;
        font-size: 16px;
        font-weight: 200;
        position: relative;
        overflow: hidden;
    }


    .center-menu-item:hover {
        color: white;
    }

    .drawerContainer {
        height: 65%;
        overflow: hidden;
        position: relative;
        border: 1px solid #ebedf0;
        border-radius: 2px;
        padding-top: 0px;
        text-align: center;
        background: white;
        z-index: 2;
        -webkit-animation: 2s opacity2 0s infinite;
        -moz-animation: 2s opacity2 0s infinite;
    }

    .menu-grid {
        width: 20%;
        text-align: center;
        box-shadow: none;

    }

    .menu-a {
        color: #333;
        box-shadow: none;
        font-size: 14px;


    }

    /*排除子标题不改变其颜色*/
    .menu-a :hover:not(.menu-sub-title) {
        color: #E32319;
        background: #F0F1F5;
        border-radius: 15px;
    }

    .menu-sub-title {
        color: #999;
        font-size: 12px;
    }


</style>